#{extends 'main.html' /} #{set title:'Home' /}

<!-- This HTML will show the tutorials under each experience level,
 if there are no tutorials either at all or for any of the levels there will appear a message 
 saying that there are no tutorials yet -->
<html>
<body>
	<form action="@{Tutorials.browseMaterial()}" method="get">
		#{ifnot tutorials}
		<p>
			<br> There are no tutorials created yet.
		</p>
		#{/ifnot}

		<h1>Beginner</h1>
		#{ifnot beginner}
		<p>
			<br> There are no tutorials created yet for this experience
			level.
		</p>
		#{/ifnot} #{list items:beginner , as:'beginner'}

		<li><a href="/Tutorials/tutorialPage?tutId=${beginner.id}">${beginner.Title.raw()}</a>
			#{/list}


			<h1>Medium</h1> #{ifnot medium}
			<p>
				<br> There are no tutorials created yet for this experience
				level.
			</p> #{/ifnot} #{list items:medium , as:'medium'}
		<li><a href="/Tutorials/tutorialPage?tutId=${medium.id}">${medium.Title.raw()}</a>
		</li> #{/list}

		<h1>Expert</h1>
		#{ifnot expert}
		<p>
			<br> There are no tutorials created yet for this experience
			level.
		</p>
		#{/ifnot} #{list items:expert , as:'expert'}
		<li><a href="/Tutorials/tutorialPage?tutId=${expert.id}">${expert.Title.raw()}</a>
		</li> #{/list}
	</form>

</body>
</html>